<template>
    <div class="conetent">
        <!-- 头部信息 -->
        <div class="header">
            <div class="wrap">
                <div class="info">
                    <div class="cover">
                        <img
                            src="https://p1.music.126.net/yeUOvVi7leJy64OkzmYZkg==/109951167598016606.jpg?param=200y200">
                        <span class="msk"></span>
                    </div>
                    <div class="cnt">
                        <div class="cntc">
                            <div class="hd">
                                <i class="type">
                                    <span class="f-pa"
                                        style="display:inline-block;width:8px;height:8px;top:2px;background-size:cover;left:34px;">
                                    </span>
                                </i>
                                <h2 class="thide">我喜欢的音乐</h2>
                            </div>
                            <div class="user">
                                <a class="face">
                                    <img
                                        src="http://p1.music.126.net/UWHepwt9BiSrGemExcLaGg==/109951165731846425.jpg?param=200y200">
                                </a>
                                <span class="name">
                                    <a class="name-link" title="qicheeng">qicheeng
                                    </a>
                                </span>
                                <span class="time">2018-07-13&nbsp;创建</span>
                            </div>
                            <ButtonList />
                        </div>
                    </div>
                </div>
            </div>
            <ComNav title="歌曲列表" moreLink="/discover/playlist/" moreText="播放次数" :showIcon="false"
                :hideBackground="true" />
        </div>
        <!-- 列表 -->
        <div class="list">
            <SongTable :songList="songs" :showHeader="true" :changeStatistics="false" />
        </div>
        <!-- 评论区 -->
        <div class="comment">
            <div class="content">
                <ComNav title="评论" moreLink="/discover/playlist/" :showIcon="false" :hideBackground="true" />
                <div class="warp">
                    <Comment />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ComNav from '../components/ComNav.vue'
import Comment from '../components/Comment.vue'
import SongTable from '../components/SongTable.vue'
import ButtonList from '../components/ButtonList.vue'

const songs = [
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    // 可添加更多歌曲项
]
</script>

<style lang="scss" scoped>
.conetent {
    position: relative;
    zoom: 1;

    .header {

        .wrap {
            padding: 40px;

            .info {
                display: flex;

                .cover {
                    position: relative;
                    display: inline;
                    margin: 0 -220px 0 0;
                    width: 200px;
                    height: 200px;

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }

                    .msk {
                        position: absolute;
                        width: 208px;
                        height: 208px;
                        background-position: 0 -1285px !important;
                        top: -4px;
                        left: -4px;
                        background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                    }
                }

                .cnt {
                    width: 100%;

                    .cntc {
                        margin-left: 250px;

                        .hd {
                            position: relative;
                            margin: 0 0 12px;
                            line-height: 24px;
                            display: flex;

                            .type {
                                position: relative;
                                top: 3px;
                                margin-right: 6px;
                                width: 54px;
                                height: 24px;
                                background-position: 0 -243px !important;
                                display: inline-block;
                                overflow: hidden;
                                vertical-align: middle;
                                font-style: normal;
                                text-align: left;
                                font-size: inherit;
                                background: url(../assets/Home/Recommend/icon.png) no-repeat;

                                .f-pa {
                                    position: absolute;
                                }
                            }

                            .thide {
                                line-height: 24px;
                                font-size: 20px;
                                font-weight: normal;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                                font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                            }
                        }

                        .user {
                            margin: 0 0 20px;
                            line-height: 35px;
                            display: flex;

                            .face {
                                margin-right: 10px;
                                width: 35px;
                                height: 35px;

                                img {
                                    width: 35px;
                                    height: 35px;
                                }
                            }

                            .name {
                                max-width: 210px;

                                .name-link {
                                    color: #0c73c2;

                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }
                            }

                            .time {
                                margin-left: 15px;
                                color: #999;
                            }
                        }
                    }
                }
            }
        }
    }

    .comment {
        margin-top: 40px;

        .content {

            .warp {
                margin-left: 32px;
                margin-right: 32px;
                margin-top: 20px;
            }
        }
    }
}
</style>